import { Button, Form, Input, Table, Space, Flex, Tag, Tooltip } from 'antd'
import { useEffect, useState, useCallback } from 'react'
import { findAllMenu, deleteMenu } from '@/api/menu'
import MenuForm from './MenuForm'
import useConfirmModal from '@/hooks/useConfirmModal'
import FormButton from '@/components/formButton'

const Menu = () => {
  const [dataSource, setDataSource] = useState([])
  const [menuModalVisible, setMenuModalVisible] = useState(false)
  const [modalTitle, setModalTitle] = useState('')
  const [menuId, setMenuId] = useState('')
  const confirmModal = useConfirmModal()

  const handleOpenModal = (title, menu_id) => {
    setModalTitle(title)
    setMenuId(menu_id)
    setMenuModalVisible(true)
  }

  const getMenuList = useCallback(async () => {
    const { data } = await findAllMenu({ type: 'tree' })
    setDataSource(data)
  }, [])

  const handleDeleteMenu = (id) => {
    confirmModal(async () => {
      await deleteMenu({ id })
      getMenuList()
    })
  }

  useEffect(() => {
    getMenuList()
  }, [getMenuList])

  const columns = [
    {
      title: '菜单名称',
      dataIndex: 'name',
      width: 200,
      render: (text) => <Tooltip trigger="click" title={text}>{text}</Tooltip>,
      ellipsis: true
    },
    {
      title: '菜单编码',
      dataIndex: 'code',
      align: 'center'
    },
    {
      title: '菜单路径',
      dataIndex: 'path',
      align: 'center'
    },
    {
      title: '菜单是否可见',
      dataIndex: 'is_visible',
      align: 'center',
      render: (text) => {
        return <Tag color={text ? 'success' : 'error'}>{text ? '显示' : '隐藏'}</Tag>
      }
    },
    {
      title: '菜单层级',
      dataIndex: 'level',
      align: 'center'
    },
    {
      title: '排序',
      dataIndex: 'sort_order',
      align: 'center'
    },
    {
      title: '菜单描述',
      dataIndex: 'description',
      align: 'center'
    },
    {
      title: '操作',
      fixed: 'right',
      width: 200,
      align: 'center',
      render: (text, record) => {
        const { menu_id } = record
        return <Flex gap="small" justify="center">
          <Button color="blue" variant='filled' size="small" onClick={() => handleOpenModal('编辑菜单', menu_id)}>编辑</Button>
          <Button color="red" variant='filled' size="small" onClick={() => handleDeleteMenu(menu_id)}>删除</Button>
          <Button color="green" variant='filled' size="small" onClick={() => handleOpenModal('菜单详情', menu_id)}>详情</Button>
        </Flex>
      }
    }
  ]

  const onFinish = (values) => {
    console.log('Success:', values)
  }

  const onOk = () => {
    getMenuList()
    setMenuModalVisible(false)
  }

  const exportData = () => {
    console.log('导出')
  }

  const importData = () => {
    console.log('导入')
  }

  const downloadData = () => {
    console.log('下载')
  }


  return <div>
    <Space direction="vertical" size="middle">
      <Form layout="inline" onFinish={onFinish}>
        <Form.Item
          label="菜单名称"
          name="name"
        >
          <Input placeholder="菜单名称" />
        </Form.Item>

        <Form.Item>
          <FormButton
            search={getMenuList}
            add={() => handleOpenModal('新增菜单')}
            export={exportData}
            import={importData}
            download={downloadData}
          />
        </Form.Item>
      </Form>

      <Table
        bordered
        columns={columns}
        dataSource={dataSource}
        rowKey="menu_id"
        size="small"
        scroll={{ x: 'max-content' }}
      />
    </Space>

    {
      menuModalVisible &&
        <MenuForm
          title={modalTitle}
          menu_id={menuId}
          visible={menuModalVisible}
          treeData={dataSource}
          onCancel={() => setMenuModalVisible(false)}
          onOk={onOk}
        />
    }
  </div>
}

export default Menu